<template>
	<div class="u-page" style="background:#fff">

		<!-- 弹窗【操作提示】 -->
		<u-modal ref="uModal" title="平台提示" v-model="show" show-cancel-button confirm-text="确认" cancel-text="取消"
			@confirm="SelectHistoryTask">
			<div class="u-p-20">
				<p>您可以从历史发起的招聘中选择一个作为此次招聘的模板；<br>1.若您想选择历史招聘，则点击“确认”按钮；<br>2.若您想发起一个新的招聘活动，则点击“取消”按钮。</p>
			</div>
		</u-modal>

		<section class="aui-flexView">
			<section class="aui-scrollView">
				<div class="aui-order-box">
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box m-width">招聘标题</div>
						<u-input v-model="form.Subject" placeholder="请填写标题,如:APP开发"></u-input>
					</div>

					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box m-width">招聘类型</div>
						<u-radio-group v-model="form.RecruitType">
							<u-radio v-for="(item, index) in TypeList" :key="index" :name="item.value"
								:disabled="item.checked" @change="selectType">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</div>

					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box m-width">招聘描述</div>
						<div class="u-flex u-col-center">
							<!-- 已添加的标签列表 -->
							<div class="u-scroll-x u-mr-5" style="width: 450rpx;">
								<u-tag v-for="(item, index) in KeyWordList" :key="index" :text="item.label" type="info"
									mode="dark" close-color="#828282" @click="onCloseTag(index)"></u-tag>
							</div>

							<!-- 添加标签按钮 -->
							<div class="u-center">
								<u-icon class="u-pointer" name="plus-circle" size="46"
									@click="toTagSettingPage(KeyWordList, 1)"></u-icon>
							</div>
						</div>
					</div>

					<div class="divHeight"></div>

					<div class="aui-flex">
						<div class="aui-flex-box">
							<h1>宣传图片</h1>
						</div>
					</div>
					<div class="pictrues-box">
						<Upload u_appid="Promote2" u_fieldName="TopPicture" :u_orunid="form.docUnid" u_type="0"
							:u_readonly="false" :u_initialAttchments="TopFiles" @receiveAttachmentsData="getData">
						</Upload>
					</div>

					<div class="Tips">
						<span style=" color: #f02323;">*提示：建议上传宣传图片，例如公司照片、招聘活动宣传照等，如不上传将使用平台默认图片</span>
					</div>

					<div class="divHeight"></div>

					<div class="aui-flex">
						<div class="aui-flex-box flex-between">
							<h1>招聘详情</h1>
						</div>
					</div>
					<div class="richtext-block">
						<cu-editor ref="editor" :formData="formData" inputHeight="500" :content="form.RecruitContent">
						</cu-editor>
					</div>

				</div>
			</section>

			<article class="m-buybar">
				<div class="btn-wrap">
					<a href="#" class="buynow btn" @click="SaveAndGoToNext()">下一步</a>
					<a href="#" class="recovery btn" @click="this.goBack()">取消</a>
				</div>
			</article>

		</section>
	</div>
</template>

<script>
	import cuEditor from '@/components/cu-editor/cu-editor'
	export default {
		components: {
			cuEditor
		},
		data() {
			return {
				form: {
					docUnid: '', // 主文档id
					Initiatorid: '', // 任务发起人id
					InitiatorName: '', // 任务发起人昵称
					Subject: '', // 标题
					RecruitType: '', // 招聘类型
					KeyWord: '', // 关键字
					Pictures: '', // 宣传图片可直接访问地址
					RecruitContent: '', // 招聘详情
					SceneAssetsId: '', // 定制ID
					SceneID: '', // 场景ID
					Status: '2', // 状态。0:废弃；1:启用；2:草稿；3:结束（默认2）

					Salary: '', // 报酬
					TotalQuota: "", // 招聘名额
					Industry: "", // 行业类别
					EndTime: "", // 招聘截止时间
					LimitDays: '', // 提交简历周期
					Inspectorid: '', // 验收人员id
					InspectorName: '', // 验收人员昵称
					EnableMatching: '否', // 是否匹配拍档。
					CSID: '', // 客服ID
				},
				show: false,
				KeyWordList: [], // 关键字
				TopFiles: [], // 顶部轮播图
				HistoryPictures: [], // 选中的历史任务宣传图片
				DefaultPictures: 'https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/static/image/recruitment_default.jpeg',
				formData: {},
				TypeList: [ // 招聘类型
					{
						value: '全职',
						name: '全职',
						checked: false,
						disabled: false
					},
					{
						value: '兼职',
						name: '兼职',
						checked: false,
						disabled: false
					},
					{
						value: '外包',
						name: '外包',
						checked: false,
						disabled: false
					},
				],
			}
		},

		onLoad(options) {

			// 未登录跳转到登录页面
			var loginRes = this.checkLogin();
			if (!loginRes) {
				return false;
			}

			// 定制ID
			this.form.SceneAssetsId = options.SceneAssetsId;
			console.log("定制ID=", this.form.SceneAssetsId)

			// 场景ID
			this.form.SceneID = options.SceneID;
			console.log("场景ID=", this.form.SceneID)

			// 任务发起人id
			this.form.Initiatorid = uni.getStorageSync('userInfo').userId;
			console.log("任务发起人Initiatorid=", this.form.Initiatorid);

			// 任务发起人昵称
			this.form.InitiatorName = uni.getStorageSync('userInfo').nickName;
			console.log("任务发起人InitiatorName=", this.form.InitiatorName);

			// 弹窗提示选择任务发起类型
			if (this.isNotNull(this.form.SceneAssetsId) && this.isNotNull(this.form.SceneID) && this.isNotNull(this.form
					.Initiatorid)) {
				this.show = true;
			}

			// 文档ID
			if (this.isNotNull(options.docUnid)) {
				this.form.docUnid = options.docUnid;
			} else {
				// 获取新的文档id
				this.getNewDocUnid();
			}

			// 获取附件
			if (this.isNotNull(this.form.docUnid)) {
				this.getTopFiles(this.form.docUnid);
			}

			// 保存选中的标签列表
			uni.$on("saveTagList", (tagList = []) => {
				this.KeyWordList = tagList;
			});


			// 保存选中的历史任务
			uni.$on("saveTaskObj", (TaskObj = {}) => {
				// console.log("保存选中的历史任务TaskObj=", TaskObj)
				this.form.docUnid = TaskObj.docUnid;
				this.form.Subject = TaskObj.Subject;
				this.form.RecruitType = TaskObj.RecruitType;
				this.form.RecruitContent = this.escape2Html(TaskObj.RecruitContent);
				this.KeyWordList = this.RestructuringLabel(TaskObj.KeyWord);
				// this.HistoryPictures = TaskObj.Pictures.split(',');
				this.$refs.editor.setValue(this.form.RecruitContent); // 设置富文本内容
			});

		},

		// 每次进入页面时，获取附件
		onShow() {
			if (this.isNotNull(this.form.docUnid)) {
				this.getTopFiles(this.form.docUnid);
			}
		},

		mounted() {
			// 一定要放在这里，否则会取不到docUnid
			this.initRichText();
		},

		methods: {

			/**
			 * 初始化富文本插件需要的参数
			 */
			initRichText() {
				// 招聘详情
				this.formData = {
					'userId': this.form.Initiatorid,
					'orunid': this.form.docUnid,
					'fieldName': 'RecruitAttach'
				}
				// console.log("this.formData1=", this.formData1);
			},

			/**
			 * 获取新的文档id
			 */
			async getNewDocUnid() {
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Recruit3',
					wf_num: 'R_Recruit3_B001',
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.form.docUnid = result.data
				}
			},

			/**
			 * 下一步
			 */
			SaveAndGoToNext() {

				this.$refs.editor.getContents((res) => {
					this.form.RecruitContent = res.html.replaceAll('"', '&quot;');
				});

				if (!this.isNotNull(this.form.Subject)) {
					this.showMSG('none', '请填写标题！')
					return
				}

				if (!this.isNotNull(this.form.RecruitType)) {
					this.showMSG('none', '请选中招聘类型！')
					return
				}

				if (!this.isNotNull(this.form.RecruitContent)) {
					this.showMSG('none', '请填写招聘详情！')
					return
				}

				// 解析标签
				this.form.KeyWord = this.ParseLabel(this.KeyWordList); // 关键字
				if (!this.isNotNull(this.form.KeyWord)) {
					this.showMSG('none', '请添加关键字！')
					return
				}


				if (this.TopFiles.length > 0) {
					// 将图片可直接访问地址，保存到Pictures字段，用于在下单页面展示
					this.TopFiles.forEach((item, index) => {
						if (this.isNotNull(item.url)) {
							if (!this.isNotNull(this.form.Pictures)) {
								this.form.Pictures += item.url;
							} else {
								this.form.Pictures += ',' + item.url;
							}
						}
					});

				} else {

					// 使用默认图片
					this.form.Pictures = this.DefaultPictures;
				}

				let TaskBasicInfo = JSON.stringify(this.form);
				this.$u.route('/pages_private_scene2/Recruit3/PublishTask?TaskBasicInfo=' + encodeURIComponent(
					TaskBasicInfo));
			},

			/**
			 * 前往选择历史任务
			 */
			async SelectHistoryTask() {

				if (this.isNotNull(this.form.SceneAssetsId) && this.isNotNull(this.form.SceneID) && this.isNotNull(this
						.form.Initiatorid)) {
					this.$u.route("/pages_private_scene2/Recruit3/common/selectHistoryTask?SceneAssetsId=" + this.form
						.SceneAssetsId + "&SceneID=" + this.form.SceneID + "&Initiatorid=" + this.form.Initiatorid);
				} else {
					this.showMSG('error', '出错了！')
				}
			},

			/**
			 * 选择招聘类型
			 */
			async selectType(e) {
				this.form.RecruitType = e;
			},

			/**
			 * 添加标签
			 */
			async toTagSettingPage(prevPageIsSelectList = [], mode = 1) {
				uni.setStorageSync("prevPageIsSelectList", prevPageIsSelectList);
				this.$u.route(`/pages_private_scene2/Recruit3/common/tag?mode=${mode}`);
			},

			/**
			 * 移除标签
			 */
			onCloseTag(index) {
				this.KeyWordList.splice(index, 1);
			},

			/**
			 * 接收上传组件传过来的值并更新附件列表数据
			 */
			async getData(res) {
				this.TopFiles = res;
			},

			/**
			 * 初始化附件列表---顶部图
			 * @param {Object} orunid 文档id
			 */
			async getTopFiles(orunid) {
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'FILE',
					wf_num: 'R_FILE_BL002',
					orunid: orunid,
					fieldName: 'TopPicture',
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.TopFiles = result.data

					/* this.HistoryPictures.forEach((item, index) => {
						this.TopFiles.push({
							url: item,
						});
					}); */
				}
			},

		},
	};
</script>

<style lang="scss" scoped>
	.aui-flexView {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.aui-scrollView {
		width: 100%;
		height: 100%;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		position: relative;
		padding-bottom: 10px;
	}

	// .aui-order-box {
	// 	padding: 10px 20px;
	// }

	.aui-choice-white {
		background: #fff;
	}

	.b-line {
		position: relative;
	}

	.b-line:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #e2e2e2;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.aui-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 15px;
		position: relative;
	}

	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		font-size: 14px;
		color: #333;
	}

	.m-width {
		max-width: 60px;
	}

	.aui-flex-box h1 {
		color: #444444;
		font-weight: 500;
		font-size: 1rem;
		overflow: hidden;
		position: relative;
		padding-left: 1rem;
	}

	.aui-flex-box h2 {
		color: #222;
		font-weight: normal;
		font-size: 1.1rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
		text-overflow: ellipsis;
		padding-left: 1rem;
	}

	.aui-flex-box p {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
		text-overflow: ellipsis;
		font-size: 0.9rem;
		margin-bottom: 0.1rem;
		color: #ffffffc4;
	}

	.aui-flex-box h3 {
		font-size: 0.7rem;
		color: #ffffffc4;
		font-weight: normal;
		width: 100%;
		overflow: hidden;
	}

	.aui-flex-box h4 {
		font-size: 0.7rem;
		color: #ffffffc4;
		font-weight: normal;
		width: 100%;
		overflow: hidden;
	}

	.aui-flex-box h5 {
		font-size: 0.8rem;
		color: #ffffff;
		font-weight: normal;
		width: 100%;
		overflow: hidden;
	}

	.aui-flex-box h1:after {
		content: '';
		position: absolute;
		z-index: 0;
		top: 3px;
		left: 0;
		width: 4px;
		height: 16px;
		border-radius: 10px;
		background: #16d7da;
	}

	.aui-flex-clear .aui-flex-box {
		color: #f21956;
		font-weight: bold;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
	}

	.editor-block {
		background: #ededed;
		width: 92%;
		margin: 0 auto;
		border-radius: 5px;
		padding: 20rpx;
		height: 11.5rem;
	}

	.richtext-block {
		background: #ededed;
		width: 92%;
		margin: 0 auto;
		border-radius: 5px;
		padding: 20rpx;
		// height: 15rem;
		height: 540rpx;
	}

	.textarea-block {
		background: #ededed;
		width: 92%;
		margin: 0 auto;
		border-radius: 5px;
		padding: 20rpx;
		height: 11.5rem;
	}

	.textarea-block textarea {
		width: 100%;
		padding: 1rem;
		font-size: 0.95rem;
		overflow: hidden;
		resize: none;
		height: 8rem;
		border: none;
		background: none;
		line-height: 1.8;
	}

	#chose_pic_btn {
		width: 210rpx;
		height: 210rpx;
		position: relative;
		display: inline-block;
		background-image: url('');
		box-sizing: border-box;
		background-size: 45px 45px;
		background-position: center center;
		background-repeat: no-repeat;
		background-color: #ededed;
		// margin-left: 3.3333%;
		margin-bottom: 12px;
		border-radius: 5px;
	}

	#chose_pic_btn input {
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		width: 100%;
		height: 100%
	}

	.divHeight {
		width: 100%;
		height: 10px;
		background: #f5f7fc;
		position: relative;
		overflow: hidden;
	}

	.m-buybar {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background: #fff;
	}

	.m-buybar .btn-wrap {
		height: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.m-buybar a {
		display: block;
		height: 50px;
		vertical-align: top;
		font-size: 15px;
		line-height: 50px;
		text-align: center;
	}

	.m-buybar .btn {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.m-buybar .buynow {
		color: #fff;
		background: #e31436;
	}

	.m-buybar .recovery {
		color: #fff;
		background: #eab315;
	}

	.m-buybar .view-pro {
		color: #fff;
		background: #3b79fe;
	}

	.aui-upload-box {
		background-color: #fff;
		/* padding: .1rem 1rem 0.5rem 0.4rem; */
		width: 210rpx;
		height: 210rpx;
		// padding-top: 10rpx;
		// padding-right: 10rpx;
	}

	.pictrues-box {
		display: flex;
		flex-wrap: wrap;
		width: 95%;
		margin: 0 auto;
		padding-bottom: 40rpx;
	}

	.Tips {
		font-size: 22rpx;
		line-height: 24rpx;
		margin-left: 20px;
		margin-right: 20px;
		color: #9a9a9a;
		padding: 0;
		/* margin: 0;
	  margin-top: 12rpx; */
		word-break: break-all;
		-webkit-overflow-scrolling: touch;
		-webkit-tap-highlight-color: transparent;
		text-size-adjust: 100%;
		text-align: left !important;
		box-sizing: border-box;
	}
</style>
